<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="a">
    <div id="b">
      <div id="c">
        <div id="d">哈哈哈哈哈</div>
      </div>
    </div>
  </div>

  <script>
    const a = document.getElementById('a')
    const b = document.getElementById('b')
    const c = document.getElementById('c')
    const d = document.getElementById('d')

    a.addEventListener('click', function (e) {
      console.log(e.target.id, '...a', e.currentTarget.id)
    }, true)

    b.addEventListener('click', function (e) {
      console.log(e.target.id, '...b', e.currentTarget.id)
    }, true)

    c.addEventListener('click', function (e) {
      console.log(e.target.id, '...c', e.currentTarget.id)
    }, true)
    
    d.addEventListener('click', function (e) {
      console.log(e.target.id, '...d', e.currentTarget.id)
    }, true)

    // 如果将 addEventListener 的第三个参数设置为 true，那么 e.currentTarget 久会是触发事件的 DOM 元素
    // a.addEventListener('click', function (e) {
    //   console.log(e.target.id) // a
    //   console.log(e.currentTarget.id) // d
    // }, true)

  </script>
</body>
</html>